<template>
  <div>
    <client-only>
      <input type="file" @change="handleChange" />
      <vue-office-docx
          :src="docxSrc"
          style="height: 100vh;"
          @rendered="renderedHandler"
          @error="errorHandler"
      />
    </client-only>
  </div>
</template>

<script setup>
import VueOfficeDocx from "@vue-office/docx";
import "@vue-office/docx/lib/index.css";
let docxSrc = ref("http://static.shanhuxueyuan.com/test.docx");
let handleChange = (e) => {
  let files = e.target.files[0];
  let reader = new FileReader();
  reader.readAsArrayBuffer(files);
  reader.onload = function () {
    docxSrc.value = reader.result;
  };
}

const renderedHandler = () =>{
  console.log("渲染完成")
}

const errorHandler= () =>{
  this.loading = false;
  console.log("渲染失败")
}
</script>

<style scoped></style>